<*****对抗演练*****>
<template>
	<div id="compReport" class="compReport" :style="{fontSize:fontSize+'px'}">
	<report-header @downloadReports="downloadReports" @zoomIn="zoomIn" @zoomOut="zoomOut" :title="reportInfo.name" :scale="scale" :disSub="disSub" :disDownloadReport="disDownloadReport" :isArchive="1" @archiveReports="archiveReports">
		</report-header>
		<div class="reportContent">
			<cover :style="pageMargin" :title="reportInfo.name" :data="coverData" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter"></cover>
			<page class="page2" :style="pageMargin" :title="reportInfo.name" :configAddress="configAddress" :configInstruction="configInstruction" v-if="hlConfig!=2" :showFooter="configReportFooter">

				<div id="scoreAnalysis" class="chart" style="height:100%;width:100%"></div>
			</page>
			<page class="page3" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in rankListPageNumArr" :key="'page'+index" :configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter">
				<!--slot--页面主体部分-->
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">排行总榜</h4>
					<Table stripe :columns="reportCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page>
			<!-- <page class="page4" :style="pageMargin" type="table" :title="reportInfo.name" v-for="(item,index) in drillPageNumArr" :key="index" :configAddress="configAddress" :configInstruction="configInstruction">
				<div :style="{height:getContentHeight()+'px'}">
					<h4 style="margin-bottom:12px;">演练数据</h4>
					<Table stripe :columns="drillCol" :data="item.data" class="rankTable"></Table>
				</div>
			</page> -->
			<!-- <page :style="pageMargin" :title="reportInfo.name" v-for="(item,index) in remarkListPageNumArr" :key="'page-remark-'+index"
				:configAddress="configAddress" :configInstruction="configInstruction">
				<div class="remark-content" v-html="item"></div>
			</page> -->
			<page class="page4" :style="pageMargin"  :title="reportInfo.name" v-if="remarkList.length>0"
				:configAddress="configAddress" :configInstruction="configInstruction" :showFooter="configReportFooter">
				<div v-for="(item, index) in remarkList" :key="item.teamName" class="remark-group">
					<p class="user-name">团队名：{{ item.teamName }}</p>
					<div>
						评价：<span class="remark-html" v-html="item.remark"></span>
					</div>
					<p class="subsection" v-if="index !== (remarkList.length - 1)"></p>
				</div>
			</page>
		</div>
	</div>
</template>

<script>
	import {getRemarkList} from '@/api/drill_compete'
	import HighCharts from 'highcharts'
	import highchartsMore from 'highcharts/highcharts-more';
	import * as SeriesLabel from 'highcharts/modules/series-label';
	import mixin from "@/components/report/mixinFun.js"
	import encryption from "@/libs/encryption.js";
	//接口
	import {
		competeReport,
		getSceneInfo,
		competDrillTableTeamStatistics
	} from '@/api/drill_compete'
	//组件
	import reportHeader from "@/components/report/reportHeader.vue"
	import cover from "@/components/report/cover.vue"
	import page from "@/components/report/page.vue"
	export default {
		name: 'awdReport',
		components: {
			page,
			cover,
			reportHeader
		},
		mixins: [mixin],
		data() {
			let September = sessionStorage.getItem("November");
    		September = JSON.parse(encryption.SelfUseDecrypt(September));
			return {
				remarkList:[],
				hlConfig:this.$route.query.hlConfig,
				reportCol: [{
					key: 'partyName',
					title: '势力方',
					per: 0.2
				}, {
					key: 'totalScore',
					title: '总分',
					per: 0.2
				}, {
					key: 'attackScore',
					title: '攻击得分',
					per: 0.2
				}, {
					key: 'defendScore',
					title: '防守得分',
					per: 0.2
				}, {
					key: 'exceptScore',
					title: '异常得分',
					per: 0.2
				}],
				reportInfo: {},
				sceneId: this.$route.query.id,
				projectId:this.$route.query.prjid,
				isRemark:this.$route.query.isRemark,
				scale: 1,
				fontSize: 14,
				disSub: false,
				rankList: [],
				rankListPageNumArr: [],
				remarkListPageNumArr: [],
				disDownloadReport: true,
				drillTableList:[],
				drillPageNumArr:[],
				drillCol:[],
				userName:September.userName,
			}
		},
		watch: {
			remarkList() {
				this.$nextTick(() => {
					this.getRemarkPageData()
					console.log(this.remarkListPageNumArr);
				})
			}
		},
		filters: {

		},
		computed: {
			coverData: function() {
				let {
					startTime,
					endTime,
					userCount,
					creatorName,
					teamCount
				} = this.reportInfo;
				return [{
					value: startTime,
					title: '开始时间'
				}, {
					value: endTime,
					title: '结束时间'
				}, {
					value: creatorName,
					title: '创建者'
				}, {
					value: (teamCount || 0) + '个',
					title: '参赛团队'
				}, {
					value: (userCount || 0) + '人',
					title: '参赛人数'
				}, ]
			},
		},
		mounted() {
			this.setStyle();
			this.getDrillDetail();
			window.onresize = () => {
				this.disDownloadReport = true;
				this.setStyle();
			}
			if(this.isRemark == 'true'){
				console.log(1111111111);
				this.getRemarkList()
			}
		},
		beforeDestroy() {

		},
		methods: {
		getRemarkList(){
            getRemarkList(this.sceneId,this.projectId).then(res=>{
                if(res.code==1  ){
                    this.remarkList=res.data
                }else{
                    this.$Message.warning(res.message)
                }
            })
        },
		archiveReports(){
				// let conetent={...this.reportInfo,...this.rankListPageNumArr,...this.remarkListPageNumArr}
				let content={
					reportInfo:this.reportInfo,
					rankListPageNumArr:this.rankListPageNumArr,
					drillPageNumArr:this.drillPageNumArr,
					hlConfig:this.hlConfig
				}
				if(this.remarkList.length>0){
					content.remarkList=this.remarkList
				}
				let data={
					userName:this.userName,
					associateId:this.sceneId,
					name:this.reportInfo.name,
					type:2,
					drillType:this.$route.query.type,
					content:JSON.stringify(content)
				}
				this.saveArchive(data)
		},
		getTablePage() {
				this.initCol();
				if(this.drillTableList.length > 0) {
					this.drillPageNumArr = this.getTablePageData(this.drillCol, this.drillTableList);
				}
		},
        initCol() {
				this.drillCol = [
				 {
					type: 'index',
					width: 60,
					title: '排名',
					align: 'center'
				},{
					key: 'teamName',
					title: '团队名称',
					width: 34
				}, {
					key: 'spendTime',
					title: '演练时长',
					per: 0.2
				}, {
					key: 'missionNum',
					title: '演练总任务数',
					width: 30
				}, {
					key: 'teamAttackNum',
					title: '团队攻击总数',
					width: 30
				},{
					key: 'teamFinishMissionNum',
					title: '团队有效攻击次数',
					per: 0.2
				}, {
					key: 'rightAttackPercent',
					title: '有效攻击指数',
					per: 0.2
				}, {
					key: 'attackPercent',
					title: '攻击指数',
					per: 0.2
				},{
					key: 'threatPercent',
					title: '威胁指数',
					per: 0.35				}];
			},
			// competDrillTableTeamStatistics(){
			// 	competDrillTableTeamStatistics([this.sceneId]).then(res=>{
			// 		if(res.code==1){
			// 			this.drillTableList=res.data
			// 			this.getTablePage()
			// 		}else{
			// 			this.$Message.warning(res.message)
			// 		}
			// 	})
			// },
			setStyle() {
				let width = (window.innerHtml || document.documentElement.clientWidth);
				this.fontSize = width / 1519 * 14;
				if(this.fontSize < 10) {
					this.fontSize = 10;
				}
				this.$nextTick(() => {
					this.disDownloadReport = false;
					this.getRemarkPageData()
				});
				this.setPageMargin();
				this.getRankPage();
			},
			initReportCol() {
				this.reportCol = [{
					key: 'partyName',
					title: '势力方',
					per: 0.2
				}, {
					key: 'totalScore',
					title: '总分',
					per: 0.2
				}, {
					key: 'attackScore',
					title: '攻击得分',
					per: 0.2
				}, {
					key: 'defendScore',
					title: '防守得分',
					per: 0.2
				}, {
					key: 'exceptScore',
					title: '异常得分',
					per: 0.2
				}];
			if(this.$route.query.hlConfig==2){
				this.reportCol.splice(3,2)
				this.reportCol.push({
					 title:'防守失分',
                    key:"defendScore",
					per: 0.15
				},
				{
					title:'异常失分',
                	key:"expLoseScore",
					per: 0.15,
					render:(h,params)=>{
                            return h('span',params.row.expLoseScore||'0')
                        }
				},
				{
					title:'加减分',
                	key:"totalAddScore",
					per: 0.15,
					render:(h,params)=>{
                            return h('span',params.row.totalAddScore||'0')
                        }
				})
				this.reportCol.splice(0,1,{
					key: 'partyName',
					title: '团队',
					per: 0.2
				})

			}
			},
			getRankPage() {
				this.initReportCol();
				if(this.rankList.length > 0) {
					this.rankListPageNumArr = this.getTablePageData(this.reportCol, this.rankList);
				}
				this.$nextTick(() => {
					this.disDownloadReport = false;
				});
			},
			getDrillDetail() { 
				getSceneInfo(this.sceneId).then(data => {
					this.reportInfo = data.data;
					this.generateReport();
				})
			},
			//生成报告
			generateReport() {
				let _this = this;
				competeReport(this.sceneId).then(data => {
					if(data.code == 1) {
						let examReportInfo = data.data;
						this.rankList = examReportInfo.rankList;
//						测试用
//						for(let i = 0; i < 100; i++) {
//							this.rankList.push(Object.assign({},this.rankList[0]))
//						}
//						this.rankList.forEach((rank, index) => {
//							rank.rank = index + 1;
//						})
						this.getRankPage();
						this.reportInfo = Object.assign({}, this.reportInfo, data.data);
						if(this.hlConfig!=2){
							this.$nextTick(() => {
								this.drawChart();
							});		
						}
					} else {
						this.$Message.error(data.message);
					}
				})
			},
			drawChart() {
				let _this = this;
				let users = [];
				let categorys = [];
				let indicatorData = [];
				if(_this.reportInfo.rankList.length <= 0) {
					return
				}
				let rankList = [];
				console.log(this.reportInfo.rankList,'this.reportInfo.rankListthis.reportInfo.rankList');
				this.reportInfo.rankList.forEach(rank => {
					let c = 1 / rank.teamScoreVOList.length;
					console.log(c,22222222222222);
					rank.teamScoreVOList.forEach((team, index) => {
							let color = rank.partyColor.split('(')[1].split(')')[0].split(',');
							color.push(1 - (index * c));
							console.log(color);
							team.partyColor = "rgba(" + color.join(',') + ")";
						})
						//			  	"'"
					rankList = rankList.concat(rank.teamScoreVOList);
				})
				let scoreOptione = {
					chart: {
						backgroundColor: 'transparent',
					},
					title: {
						text: '得分趋势统计',
						align: 'left',
						y: this.fontSize * 0.8,
						style: {
							fontSize: this.fontSize * 0.8 + 'px',
							fontWeight: 'bold',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					legend: {
						//        	floating: true,            
						align: 'left',
						verticalAlign: 'top',
						itemStyle: {
							fontSize: this.fontSize * 0.6 + 'px',
							fontWeight: 'normal',
							//		            color: 'red'   //这边是改标题的字体大小和颜色
						}
					},
					xAxis: {
						categories: rankList[0].teamScoreVO.map(score => score.scoreDate),
						labels: {
							style: {
								fontSize: this.fontSize * 0.6
							},
						},
					},
					plotOptions: {
						series: {
							label: {
								//connectorAllowed: false
							}
						}
					},
					yAxis: {
						title: {
							text: '得分'
						},
					},
					series: rankList.map(team => {
						return {
							name: team.teamName,
							//type:'line',
							data: team.teamScoreVO.map(score => score.score)
						}
					}),
					colors: rankList.map(rank => rank.partyColor),
					credits: {
						enabled: false
					}, //去掉地址
					exporting: {
						enabled: false
					}, //隐藏导出图片
					responsive: {
						rules: [{
							condition: {
								maxWidth: 500
							},
							chartOptions: {
								legend: {
									layout: 'horizontal',
									align: 'left',
									verticalAlign: 'top'
								}
							}
						}]
					}
				};
				SeriesLabel(HighCharts);
				HighCharts.chart('scoreAnalysis', scoreOptione);
			},
			zoomIn() {
				if(this.scale == 0.5) {
					return
				}
				this.disDownloadReport = true;
				this.scale = this.accSub(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize - 0.5;
				}
				if(this.hlConfig!=2){
					this.drawChart();			
				}
				this.setPageMargin();
				this.getRankPage();
			},
			zoomOut() {
				if(this.scale == 3) {
					return
				}
				this.disDownloadReport = true;
				this.scale = this.accAdd(this.scale, 0.1);
				if(this.scale != 0) {
					this.fontSize = this.fontSize + 0.5;
				}
				if(this.hlConfig!=2){
					this.drawChart();			
				}
				this.setPageMargin();
				this.getRankPage();
			}
		},
		destroyed() {

		}
	}
</script>
<style scoped src="@/components/report/report.css">
	
</style>